<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "zhangsan",
      book: {
        name: "三国演义",
        cbs: "北京",
      },
    };
  },
  watch: {
    //函数写法
    uanme(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    // 对象写法
    uname: {
      handler(newVal, oldVal) {
        //写对象格式,handler必须写,名字固定
        console.log(newVal, oldVal);
      },
      immediate: true, //加入这个选项,表示立即侦听
      //通俗的说,就是打开页面马上获取初始值
    },
    book: {
      handler(newVal) {
        console.log(newVal);
      },
      deep: true, //深度侦听,用于侦听对象的属性变化
    },
  },
};
</script>

<style>
</style>